<template>
  <div class="app-container" v-if="tabList.length > 0">
    <el-tabs type="border-card" v-model="activeName">
      <template v-for="item in tabList">
        <el-tab-pane :label="item.label" :name="item.value">
          <project-summary v-if="item.value == '1' && activeName == '1'"></project-summary>
          <supplier-summary v-if="item.value == '2' && activeName == '2'"></supplier-summary>
          <market-summary v-if="item.value == '3' && activeName == '3'"></market-summary>
          <customer-info-summary v-if="item.value == '4' && activeName == '4'"></customer-info-summary>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>
<script>
import ProjectSummary from '@/components/ProjectSummaryChart'
import SupplierSummary from '@/components/SupplierSummaryChart'
import MarketSummary from '@/components/MarketSummaryChart'
import CustomerInfoSummary from '@/components/CustomerInfoSummaryChart'
import { mapGetters } from 'vuex'
import { getTouristlnfo } from '@/api/system/user'
export default {
  name: 'Index',
  components: {
    ProjectSummary,
    SupplierSummary,
    MarketSummary,
    CustomerInfoSummary,
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  watch: {},
  data() {
    return {
      welcomeTitle: '',
      activeName: '',
      tabList: [],
      isHidden: true,
      loading: false,
    }
  },

  // DOM 渲染完成触发
  mounted() {
    const tabList = []
    if (this.checkPermi(['biz:workbench:project'])) {
      tabList.push({
        label: '项目汇总',
        value: '1',
      })
    }
    if (this.checkPermi(['biz:workbench:supplier'])) {
      tabList.push({
        label: '供应商',
        value: '2',
      })
    }
    if (this.checkPermi(['biz:workbench:market'])) {
      tabList.push({
        label: '市场拓展',
        value: '3',
      })
    }
    if (this.checkPermi(['biz:workbench:customer'])) {
      tabList.push({
        label: '客户关系',
        value: '4',
      })
    }
    this.tabList = [...tabList]
    if (tabList[0]) {
      this.activeName = tabList[0].value
    }
    if (tabList.length === 0) {
      this.$message.error('无权限查看,请联系管理员')
    }
  },
  methods: {},
}
</script>
<style lang="scss">
.app-container {
  min-height: 84vh;
}
body {
  overflow: auto !important;
  margin: 0;
  box-sizing: border-box;
}
body,
body * {
  /* 滚动条 */
  &::-webkit-scrollbar-track-piece {
    background-color: #fff; /*滚动条的背景颜色*/
    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  }

  &::-webkit-scrollbar {
    width: 10px; /*滚动条的宽度*/
    height: 8px; /*滚动条的高度*/
  }

  &::-webkit-scrollbar-thumb:vertical {
    /*垂直滚动条的样式*/
    height: 50px;
    background-color: rgba(153, 153, 153, 0.5);
    -webkit-border-radius: 4px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条的hover样式*/
    background-color: rgba(159, 159, 159, 0.3);
    -webkit-border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    /*滚动条的hover样式*/
    background-color: rgba(159, 159, 159, 0.5);
    -webkit-border-radius: 4px;
  }
}
</style>
